<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>岭南醒狮之旅</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			.container {
				max-width: 98%;
				position: relative;
				margin: 0 auto;
				text-align: center;
				height: 100vh;
				/*将容器高度设置为浏览器视窗高度的100%*/
				overflow: hidden;
			}

			
			.beijing  {
				max-width: 100%;
				/*最大宽度为100%*/
				max-height: 100%;
				/*最大高度为100%*/
				height: 100vh;
			}
			
			.shizi {
				position: absolute;
				width: 22%;
				left: 35%;
				transform: translate(-50%, 0%);
				bottom: 20%;
				z-index: 3;
			}
			
			.zilingnan {
				position: absolute;
				width: 25%;
				left: 60%;
				transform: translate(-50%, 0%);
				bottom: 60%;
				z-index: 2;
			}
			
			.zixingshi {
				position: absolute;
				width: 30%;
				left: 62%;
				transform: translate(-50%, 0%);
				bottom: 42%;
				z-index: 3;
			}
			
			.zizhilv {
				position: absolute;
				width: 25%;
				left: 63%;
				transform: translate(-50%, 0%);
				bottom: 28%;
				z-index: 4;
			}
			
			.gu {
				position: absolute;
                width: 15%;
                left: 55%;
                transform: translate(-50%, 0%);
                bottom: 13%;
                z-index: 2;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="bg">
				<img class="beijing" src="res/beijing.png" />
		        <img class="shizi" src="res/shizi(1).png" />
		        <img class="zilingnan" src="res/zilingnan(1).png" />
		        <img class="zixingshi" src="res/zixingshi(1).png" />
	         	<img class="zizhilv" src="res/zizhilv(1).png" />
		        <img class="gu" src="res/gu(1).png" />
			</div>
		</div>
	</body>

</html>